<template>
  <div id="topography">
    <div id="line"></div>
    <div class="node" style="top: 175px; left: 651px;">
      <CERNET :status="topographyData['9'].level" />
    </div>
    <div class="node" style="top: 105px; left: 751px;">
      <CDMA :status="topographyData['10'].level" />
    </div>
    <div class="node" style="top: 109px; left: 851px;">
      <CMCC :status="topographyData['11'].level" />
    </div>
    <div class="node" style="top: 135px; left: 951px;">
      <EMAN :status="topographyData['12'].level" />
    </div>
    <div class="node" style="top: 225px; left: 956px;">
      <EgovernmentIntranet :status="topographyData['13'].level" />
    </div>
    <div class="node" style="top: 226px; left: 1724px;">
      <EgovernmentIntranet :status="topographyData['27'].level" />
    </div>
    <div class="node" style="top: 221px; left: 655px;">
      <label for="">CERNET</label>
    </div>
    <div class="node" style="top: 146px; left: 752px;">
      <label for="">中国电信</label>
    </div>
    <div class="node" style="top: 149px; left: 854px;">
      <label for="">中国移动</label>
    </div>
    <div class="node" style="top: 181px; left: 964px;">
      <label for="">教育城域网</label>
    </div>
    <div class="node" style="top: 272px; left: 946px;">
      <label for="">电子政务内网</label>
    </div>
    <div class="node" style="top: 272px; left: 1711px;">
      <label for="">电子政务内网</label>
    </div>
    <div class="node" style="top: 186px; left: 750px;">
      <Firewall :status="topographyData['74'].level" />
    </div>
    <div class="node" style="top: 186px; left: 844px;">
      <Firewall :status="topographyData['75'].level" />
    </div>
    <div class="node" style="top: 153px; left: 131px;">
      <Server2 :status="topographyData['1'].level" />
    </div>
    <div class="node" style="top: 213px; left: 131px;">
      <Server2 :status="topographyData['2'].level" />
    </div>
    <div class="node" style="top: 283px; left: 127px;">
      <label for="">webseal服务器</label>
    </div>
    <div class="node" style="top: 323px; left: 131px;">
      <Server2 :status="topographyData['3'].level" />
    </div>
    <div class="node" style="top: 400px; left: 131px;">
      <Server2 :status="topographyData['4'].level" />
    </div>
    <div class="node" style="top: 220px; left: 518px;">
      <LoadBalance :status="topographyData['5'].level" />
    </div>
    <div class="node" style="top: 272px; left: 510px;">
      <label for="">F5负载均衡</label>
    </div>
    <div class="node" style="top: 333px; left: 518px;">
      <LoadBalance :status="topographyData['6'].level" />
    </div>
    <div class="node" style="top: 385px; left: 510px;">
      <label for="">F5负载均衡</label>
    </div>
    <div class="node" style="top: 384px; left: 748px;">
      <CoreSwitch :status="topographyData['7'].level" />
    </div>
    <div class="node" style="top: 384px; left: 833px;">
      <CoreSwitch :status="topographyData['8'].level" />
    </div>
    <div class="node" style="top: 428px; left: 790px;">
      <label for="">核心交换</label>
    </div>
    <div class="node" style="top: 325px; left: 1356px;">
      <label for="">数据中心数据库</label>
    </div>
    <div class="node" style="top: 365px; left: 1336px;">
      <Server2 :status="topographyData['23'].level" />
    </div>
    <div class="node" style="top: 398px; left: 1386px;">
      <label for="">数据中心</label>
    </div>
    <div class="node" style="top: 445px; left: 1336px;">
      <Server2 :status="topographyData['25'].level" />
    </div>
    <div class="node" style="top: 475px; left: 1384px;">
      <label for="">数据交换平台</label>
    </div>
    <div class="node" style="top: 322px; left: 1447px;">
      <Server2 :status="topographyData['22'].level" />
    </div>
    <div class="node" style="top: 369px; left: 1447px;">
      <Server2 :status="topographyData['24'].level" />
    </div>
    <div class="node" style="top: 427px; left: 1447px;">
      <Server2 :status="topographyData['26'].level" />
    </div>
    <div class="node" style="top: 418px; left: 1568px;">
      <label for="">NS40G</label>
    </div>
    <div class="node" style="top: 400px; left: 1624px;">
      <NS40G :status="topographyData['29'].level" />
    </div>
    <div class="node" style="top: 392px; left: 1724px;">
      <Server2 :status="topographyData['28'].level" />
    </div>
    <div class="node" style="top: 445px; left: 1728px;">
      <label for="">OA内网</label>
    </div>
    <div class="node" style="top: 440px; left: 434px;">
      <label for="">认证服务器</label>
    </div>
    <div class="node" style="top: 440px; left: 631px;">
      <label for="">portal服务器群</label>
    </div>
    <div class="node" style="top: 440px; left: 975px;">
      <label for="">备份管理服务器</label>
    </div>
    <div class="node" style="top: 440px; left: 1124px;">
      <label for="">oracle备份恢复测试</label>
    </div>
    <div class="node" style="top: 462px; left: 394px;">
      <Server2 :status="topographyData['14'].level" />
    </div>
    <div class="node" style="top: 462px; left: 484px;">
      <Server2 :status="topographyData['15'].level" />
    </div>
    <div class="node" style="top: 462px; left: 574px;">
      <Server2 :status="topographyData['16'].level" />
    </div>
    <div class="node" style="top: 462px; left: 624px;">
      <Server2 :status="topographyData['17'].level" />
    </div>
    <div class="node" style="top: 462px; left: 674px;">
      <Server2 :status="topographyData['18'].level" />
    </div>
    <div class="node" style="top: 462px; left: 714px;">
      <Server2 :status="topographyData['19'].level" />
    </div>
    <div class="node" style="top: 462px; left: 988px;">
      <Server2 :status="topographyData['20'].level" />
    </div>
    <div class="node" style="top: 462px; left: 1150px;">
      <Server :status="topographyData['21'].level" />
    </div>
    <div class="node" style="top: 574px; left: 330px;">
      <Server :status="topographyData['65'].level" />
    </div>
    <div class="node" style="top: 574px; left: 425px;">
      <Server :status="topographyData['66'].level" />
    </div>
    <div class="node" style="top: 574px; left: 515px;">
      <Server :status="topographyData['67'].level" />
    </div>
    <div class="node" style="top: 574px; left: 590px;">
      <Server2 :status="topographyData['68'].level" />
    </div>
    <div class="node" style="top: 574px; left: 725px;">
      <Server2 :status="topographyData['69'].level" />
    </div>
    <div class="node" style="top: 574px; left: 860px;">
      <Server :status="topographyData['70'].level" />
    </div>
    <div class="node" style="top: 574px; left: 965px;">
      <Server :status="topographyData['71'].level" />
    </div>
    <div class="node" style="top: 574px; left: 1045px;">
      <Server :status="topographyData['72'].level" />
    </div>
    <div class="node" style="top: 574px; left: 1185px;">
      <Server :status="topographyData['73'].level" />
    </div>
    <div class="node" style="top: 628px; left: 326px;">
      <label for="">应用中心</label>
    </div>
    <div class="node" style="top: 628px; left: 418px;">
      <label for="">综合应用管理</label>
    </div>
    <div class="node" style="top: 628px; left: 521px;">
      <label for="">测评系统</label>
    </div>
    <div class="node" style="top: 628px; left: 594px;">
      <label for="">测评WEB</label>
    </div>
    <div class="node" style="top: 628px; left: 742px;">
      <label for="">综管</label>
    </div>
    <div class="node" style="top: 628px; left: 889px;">
      <label for="">教育数据分析平台</label>
    </div>
    <div class="node" style="top: 628px; left: 1050px;">
      <label for="">扫描系统</label>
    </div>
    <div class="node" style="top: 628px; left: 1160px;">
      <label for="">固定资产管理系统</label>
    </div>
    <div class="node" style="top: 608px; left: 1526px;">
      <label for="">SAN存储系统</label>
    </div>
    <div class="node" style="top: 576px; left: 1630px;">
      <Database :status="topographyData['30'].level" />
    </div>
    <div class="node" style="top: 668px; left: 774px;">
      <label for="">SAN存储</label>
    </div>
    <div class="node" style="top: 725px; left: 250px;">
      <Server2 :status="topographyData['35'].level" />
    </div>
    <div class="node" style="top: 725px; left: 330px;">
      <Server2 :status="topographyData['36'].level" />
    </div>
    <div class="node" style="top: 725px; left: 392px;">
      <Server2 :status="topographyData['37'].level" />
    </div>
    <div class="node" style="top: 725px; left: 442px;">
      <Server2 :status="topographyData['38'].level" />
    </div>
    <div class="node" style="top: 725px; left: 487px;">
      <Server2 :status="topographyData['39'].level" />
    </div>
    <div class="node" style="top: 725px; left: 532px;">
      <Server2 :status="topographyData['40'].level" />
    </div>
    <div class="node" style="top: 725px; left: 580px;">
      <Server2 :status="topographyData['41'].level" />
    </div>
    <div class="node" style="top: 725px; left: 628px;">
      <Server2 :status="topographyData['42'].level" />
    </div>
    <div class="node" style="top: 725px; left: 698px;">
      <Server :status="topographyData['43'].level" />
    </div>
    <div class="node" style="top: 725px; left: 780px;">
      <Server :status="topographyData['44'].level" />
    </div>
    <div class="node" style="top: 725px; left: 854px;">
      <Server :status="topographyData['45'].level" />
    </div>
    <div class="node" style="top: 725px; left: 936px;">
      <Server :status="topographyData['46'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1010px;">
      <Server :status="topographyData['47'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1090px;">
      <Server :status="topographyData['48'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1165px;">
      <Server :status="topographyData['49'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1248px;">
      <Server :status="topographyData['50'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1318px;">
      <Server2 :status="topographyData['51'].level" />
    </div>
    <div class="node" style="top: 725px; left: 1404px;">
      <Server2 :status="topographyData['52'].level" />
    </div>
    <div class="node" style="top: 782px; left: 246px;">
      <label for="">1台数据库</label>
    </div>
    <div class="node" style="top: 782px; left: 325px;">
      <label for="">1台WEB</label>
    </div>
    <div class="node" style="top: 814px; left: 256px;">
      <label for="">教学资源云平台系统</label>
    </div>
    <div class="node" style="top: 782px; left: 497px;">
      <label for="">南山教育在线</label>
    </div>
    <div class="node" style="top: 782px; left: 696px;">
      <label for="">1台数据库</label>
    </div>
    <div class="node" style="top: 782px; left: 778px;">
      <label for="">1台APP</label>
    </div>
    <div class="node" style="top: 782px; left: 865px;">
      <label for="">网络知识管理系统</label>
    </div>
    <div class="node" style="top: 782px; left: 1049px;">
      <label for="">教育微信</label>
    </div>
    <div class="node" style="top: 782px; left: 1170px;">
      <label for="">电子成长档案袋系统</label>
    </div>
    <div class="node" style="top: 782px; left: 1345px;">
      <label for="">调差问卷系统</label>
    </div>
    <div class="node" style="top: 800px; left: 1477px;">
      <label for="">SAN存储</label>
    </div>
    <div class="node" style="top: 752px; left: 1665px;">
      <Exchange  :status="topographyData['31'].level" />
    </div>
    <div class="node" style="top: 777px; left: 1737px;">
      <label for="">SAN交换机</label>
    </div>
    <div class="node" style="top: 804px; left: 1600px;">
      <Exchange  :status="topographyData['32'].level" />
    </div>
    <div class="node" style="top: 886px; left: 251px;">
      <Server :status="topographyData['53'].level" />
    </div>
    <div class="node" style="top: 886px; left: 318px;">
      <Server :status="topographyData['54'].level" />
    </div>
    <div class="node" style="top: 886px; left: 515px;">
      <Server :status="topographyData['55'].level" />
    </div>
    <div class="node" style="top: 886px; left: 585px;">
      <Server :status="topographyData['56'].level" />
    </div>
    <div class="node" style="top: 886px; left: 697px;">
      <Server :status="topographyData['57'].level" />
    </div>
    <div class="node" style="top: 886px; left: 771px;">
      <Server :status="topographyData['58'].level" />
    </div>
    <div class="node" style="top: 886px; left: 876px;">
      <Server :status="topographyData['59'].level" />
    </div>
    <div class="node" style="top: 886px; left: 1000px;">
      <Server :status="topographyData['60'].level" />
    </div>
    <div class="node" style="top: 886px; left: 1121px;">
      <Server :status="topographyData['61'].level" />
    </div>
    <div class="node" style="top: 886px; left: 1200px;">
      <Server2 :status="topographyData['62'].level" />
    </div>
    <div class="node" style="top: 886px; left: 1299px;">
      <Server :status="topographyData['63'].level" />
    </div>
    <div class="node" style="top: 886px; left: 1397px;">
      <Server :status="topographyData['64'].level" />
    </div>
    <div class="node" style="top: 940px; left: 262px;">
      <label for="">民幼财务管理系统</label>
    </div>
    <div class="node" style="top: 940px; left: 535px;">
      <label for="">师生阅读系统</label>
    </div>
    <div class="node" style="top: 940px; left: 718px;">
      <label for="">图书管理系统</label>
    </div>
    <div class="node" style="top: 940px; left: 872px;">
      <label for="">电子期刊</label>
    </div>
    <div class="node" style="top: 940px; left: 996px;">
      <label for="">电子图书</label>
    </div>
    <div class="node" style="top: 940px; left: 1121px;">
      <label for="">慕课系统</label>
    </div>
    <div class="node" style="top: 940px; left: 1188px;">
      <label for="">工作管理WEB</label>
    </div>
    <div class="node" style="top: 940px; left: 1283px;">
      <label for="">跨越式平台管理</label>
    </div>
    <div class="node" style="top: 940px; left: 1385px;">
      <label for="">仿真实验管理</label>
    </div>
    <div class="node" style="top: 900px; left: 1590px;">
      <TapeLibrary  :status="topographyData['34'].level" />
    </div>
    <div class="node" style="top: 900px; left: 1678px;">
      <TapeLibrary  :status="topographyData['33'].level" />
    </div>
    <div class="node" style="top: 985px; left: 1589px;">
      <label for="">虚拟带库</label>
    </div>
    <div class="node" style="top: 985px; left: 1681px;">
      <label for="">磁带库</label>
    </div>
  </div>
</template>

<script>
import CERNET from "./components/CERNET.vue";
import CDMA from "./components/CDMA.vue";
import CMCC from "./components/CMCC.vue";
import EMAN from "./components/EMAN.vue";
import EgovernmentIntranet from "./components/EgovernmentIntranet.vue";
import Server2 from "./components/Server2.vue";
import LoadBalance from "./components/LoadBalance.vue";
import Firewall from "./components/Firewall.vue";
import NS40G from "./components/NS40G.vue";
import Server from "./components/Server.vue";
import Database from "./components/Database.vue";
import Exchange from "./components/Exchange.vue";
import TapeLibrary from "./components/TapeLibrary.vue";
import CoreSwitch from "./components/CoreSwitch.vue";
import {getTopography} from "./api/topography"


export default {
  components: {
    CERNET,
    CDMA,
    CMCC,
    EMAN,
    EgovernmentIntranet,
    Server2,
    LoadBalance,
    Firewall,
    NS40G,
    Server,
    Database,
    Exchange,
    TapeLibrary,
    CoreSwitch
  },
  data(){
    return{
      topographyData:{}
    }
  },
  created(){
    this.fetchData()
    this.topographyData = setInterval(() => {
      this.fetchData()
    }, 5 * 1000)
  },
  destroyed() {
    clearInterval(this.topographyData)
  },
  methods:{
    fetchData() {
      getTopography().then((res)=>{
        this.topographyData=res.data.responseBody;
      });
    }
  }
};
</script>

<style lang="less">
body {
  margin: 0;
  padding: 0;
}
#topography {
  background-image: url(./assets/bg.jpg);
  height: 1080px;
  width: 1920px;
  position: relative;
}
#line {
  background-image: url(./assets/v1_line.gif);
  height: 867px;
  width: 1751px;
  position: absolute;
  z-index: 2000;
  top: 142px;
  left: 45px;
}
.node {
  position: absolute;
  z-index: 2001;
  font-family: SourceHanSansSC-Regular;
  color: #dff3ff;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
